<template>
	<view class="login">
		<image src="../../static/img/logobg.jpg" mode="  heightFix" class="img"></image>
		<div class="conten">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scrollleft">
				<view class="scroll-view-item_H">
					<u-form :model="form" ref="form1" class="form" >
						<u-form-item label="账号" prop="account"><u-input v-model="form.account"
								placeholder-style="color:#EF5F54" /></u-form-item>
						<u-form-item label="密码" prop="password" placeholder-style="color:#EF5F54"><u-input
								v-model="form.password" /></u-form-item>
						<view class="btnbox">
							<button class="formbtn" @click="formgohome">登录</button>
						</view>
					</u-form>
					<u-icon name="play-right-fill" class="aftericon" color="green" size="35" v-if="computedscroll < 20"></u-icon>
				</view>
				<view class="scroll-view-item_Hwexin">
					<view class="vxbtn">
						<button @click="goadmin">微信一键登录</button>
					</view>
				</view>
			</scroll-view>


		</div>

	</view>
</template>

<script setup>
import { computed, reactive } from 'vue';
import { login } from '@/api/user.js'
const form1 = ref(null)
const form = reactive({
	account: 'xbsj001',
	password: '123456',

})
const scrollLeftvalue = ref(0)
const rules = {
	account: [
		{
			required: true,
			message: '请输入账号/xbsj001',
			trigger: ['change', 'blur'],
		}
	],
	password: [
		{
			required: true,
			message: '请输入密码/123456',
			trigger: 'change'
		}
	]
}
const formgohome = (e) => {
	form1.value&&form1.value.validate(valid => {
		if (valid) {
			login(form).then((e) => {
				console.log(e, '登录');
			})

		} else {
			console.log('验证失败');
		}
	})
}

const goadmin = () => {
	uni.switchTab({
		url: '/pages/index/index'
	})
}
const scrollleft = (e) => {
	if (e) {
		console.log(e);
		scrollLeftvalue.value = e.detail.scrollLeft
	}

}
const computedscroll = computed(() => {
	return scrollLeftvalue.value
})


	
onReady(()=>{
	form1.value.setRules(rules);
}) 
		
	

</script>

<style lang="scss" secoped>
.login {
	height: 100vh;
	width: 100%;
	position: relative;
	background-image: linear-gradient(#0cb468, #3cba92 100%);

	.img {
		margin-top: 100rpx;
		height: 400rpx;
		width: 100%;
		border-radius: 30% 70% 70% 30% / 30% 30% 50% 40%;
	}

	.conten {
		height: 420rpx;
		width: 90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		backdrop-filter: blur(4px) brightness(108%);
		background-color: rgba(255, 255, 255, 0.25);
		border-radius: 13px;

		.scroll-view_H {

			height: 420rpx;
			white-space: nowrap;
			width: 100%;
			position: relative;

			.scroll-view-item_H {
				display: inline-block;
				width: 100%;
				height: 420rpx;
				font-size: 36rpx;
				padding: 20rpx;

				overflow: hidden;

				.form {

					width: 100%;

					.btnbox {
						margin: 10px;

						.formbtn {
							height: 80rpx;
							line-height: 80rpx;
							background: green;
							color: #fff;
						}
					}
				}

				.aftericon {
					position: absolute;
					right: -5px;
					/* 伪元素在父盒子右侧，距离父盒子 10px */
					top: 50%;
					/* 垂直居中 */
					transform: translateY(-50%);
					/* 完全垂直居中 */
				}
			}

			.scroll-view-item_Hwexin {
				display: inline-block;
				width: 100%;
				height: 400rpx;
				line-height: 400rpx;
				font-size: 36rpx;
				padding: 20rpx;
				overflow: hidden;

				.vxbtn {
					height: 100%;
					width: 100%;
					display: flex;
					align-items: center;

					button {
						height: 80rpx;
						line-height: 80rpx;
						background: green;
						color: #fff;
					}
				}
			}




		}



	}

}
</style>